<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票: {{ question.question_text|truncatechars:50 }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            --secondary-gradient: linear-gradient(135deg, #36b9cc 0%, #1a7e8c 100%);
            --shadow-layer: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition-default: all 0.3s ease;
        }
        
        body {
            background-color: #f9fafb;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            padding-top: 20px;
            padding-bottom: 40px;
        }
        
        .vote-container {
            max-width: 1100px;
            margin: 2rem auto;
            padding: 0 15px;
        }
        
        .vote-card, .side-card {
            box-shadow: var(--shadow-layer);
            border-radius: 0.75rem;
            overflow: hidden;
            margin-bottom: 2rem;
            background: white;
            transition: var(--transition-default);
            height: 100%;
        }
        
        .vote-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }
        
        .side-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            background: var(--primary-gradient);
            color: white;
            padding: 1.5rem;
            position: relative;
        }
        
        .side-header {
            background: var(--secondary-gradient);
        }
        
        .card-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
        }
        
        .card-body {
            padding: 2rem;
        }
        
        .side-card .card-body {
            padding: 1.5rem;
        }
        
        .error-alert {
            border-radius: 0.5rem;
            border-left: 4px solid #d93025;
            margin-bottom: 1.5rem;
            animation: fadeIn 0.3s ease;
        }
        
        .choice-item {
            display: flex;
            align-items: center;
            padding: 1rem 1.25rem;
            margin: 0.8rem 0;
            border-radius: 0.5rem;
            border: 1px solid #eaeaea;
            transition: var(--transition-default);
            cursor: pointer;
            position: relative;
        }
        
        .choice-item:hover {
            background: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border-color: #d0d7de;
        }
        
        .choice-radio {
            transform: scale(1.2);
            margin-right: 1rem;
        }
        
        .submit-btn {
            background: var(--primary-gradient);
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            border-radius: 50px;
            transition: var(--transition-default);
            margin-top: 1rem;
            font-weight: 500;
            width: 100%;
            max-width: 300px;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(78, 115, 223, 0.3);
        }
        
        .back-link {
            display: inline-flex;
            align-items: center;
            color: #5f6368;
            margin-top: 1.5rem;
            transition: var(--transition-default);
            text-decoration: none;
        }
        
        .back-link:hover {
            color: #1a73e8;
            transform: translateX(-3px);
        }
        
        .empty-choices {
            padding: 2rem;
            text-align: center;
            background: #fff8f8;
            border-radius: 0.5rem;
            animation: fadeIn 0.5s ease;
        }
        
        .poll-info {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            padding: 1.5rem;
            border-radius: 0.5rem;
            background-color: #f8f9fa;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .info-item {
            text-align: center;
            padding: 0 1rem;
        }
        
        .info-value {
            font-size: 1.25rem;
            font-weight: 600;
            color: #4e73df;
        }
        
        .info-label {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .creator-info {
            display: flex;
            align-items: center;
            margin-top: 1.5rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 0.5rem;
        }
        
        .creator-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #e0e7ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #4e73df;
            margin-right: 1rem;
        }
        
        /* 注意事项样式 */
        .notice-item {
            display: flex;
            align-items: flex-start;
            padding: 1rem;
            margin-bottom: 0.8rem;
            border-radius: 0.5rem;
            background: #f8f9fa;
            transition: var(--transition-default);
        }
        
        .notice-item:hover {
            background: #eef2f7;
            transform: translateX(3px);
        }
        
        .notice-icon {
            min-width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-right: 1rem;
        }
        .notice-item:nth-child(1) .notice-icon { background-color: #e0f7fa; color: #00acc1; }
        .notice-item:nth-child(2) .notice-icon { background-color: #fff3e0; color: #f57c00; }
        .notice-item:nth-child(3) .notice-icon { background-color: #e8f5e9; color: #43a047; }
        .notice-item:nth-child(4) .notice-icon { background-color: #ffebee; color: #e53935; }
        .notice-item:nth-child(5) .notice-icon { background-color: #e3f2fd; color: #1976d2; }
        .notice-item:nth-child(6) .notice-icon { background-color: #f3e5f5; color: #8e24aa; }
        
        .notice-content h5 {
            font-size: 1rem;
            margin-bottom: 0.25rem;
            color: #2c3e50;
        }
        
        .notice-content p {
            font-size: 0.9rem;
            color: #546e7a;
            margin-bottom: 0;
        }
        
        /* 两列布局 */
        .vote-layout {
            display: flex;
            gap: 20px;
        }
        
        .vote-main {
            flex: 7;
        }
        
        .vote-sidebar {
            flex: 3;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .choice-item {
            animation: fadeIn 0.3s ease forwards;
            opacity: 0;
        }
        
        /* 动态动画延迟 */
        .choice-item:nth-child(n) { animation-delay: calc(0.1s * var(--item-index)); }
        
        /* 选中状态样式 */
        .choice-item input:checked + label {
            color: #4e73df;
            font-weight: 500;
        }
        
        .choice-item input:checked ~ label::after {
            content: '✓';
            margin-left: 1rem;
            color: #4e73df;
            font-weight: bold;
        }
        
        .choice-item input:checked ~ .check-indicator {
            display: block;
        }
        
        @media (max-width: 992px) {
            .vote-layout {
                flex-direction: column;
            }
            
            .vote-sidebar {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .card-body {
                padding: 1.5rem;
            }
            
            .choice-item {
                padding: 0.9rem;
            }
            
            .poll-info {
                flex-direction: column;
                gap: 1rem;
            }
            
            .vote-container {
                max-width: 100%;
                padding: 0 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary shadow-sm">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'polls:index' %}">
                <i class="bi bi-bar-chart-steps me-2"></i>
                <span>投票系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'polls:index' %}"><i class="bi bi-house-door me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="bi bi-plus-circle me-1"></i>创建投票 </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="bi bi-graph-up me-1"></i> 投票结果</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="bi bi-question-circle me-1"></i> 帮助中心</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <button class="btn btn-light me-2"><i class="bi bi-box-arrow-in-right me-1"></i> 登录</button>
                </div>
            </div>
        </div>
    </nav>

    <div class="vote-container">
        <div class="vote-layout">
            <div class="vote-main">
                <form action="{% url 'polls:vote' question.id %}" method="post">
                {% csrf_token %}
                <div class="vote-card">
                    <div class="card-header">
                        <h1 class="h3 mb-0">{{ question.question_text }}</h1>
                        <p class="mb-0 mt-2 opacity-75">请选择您支持的选项</p>
                    </div>
                    
                    <div class="card-body">
                        {% if error_message %}
                        <div class="alert alert-danger error-alert d-flex align-items-center" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <div>
                                <strong>错误:</strong> {{ error_message }}
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if question.choices.all %}
                            {% for choice in question.choices.all %}
                            <div class="choice-item">
                                <input type="radio" class="choice-radio" name="choice" 
                                       id="choice{{ forloop.counter }}" value="{{ choice.id }}" required>
                                <label class="form-check-label fs-5" for="choice{{ forloop.counter }}">
                                    {{ choice.choice_text }}
                                </label>
                            </div>
                            {% endfor %}
                        {% else %}
                        <div class="empty-choices">
                            <div class="mb-3">
                                <i class="bi bi-inbox text-danger" style="font-size: 3rem;"></i>
                            </div>
                            <h4 class="fw-bold mb-2">此投票暂无选项</h4>
                            <p class="text-muted">请等待管理员添加投票选项</p>
                        </div>
                        {% endif %}
                        
                        <div class="d-flex flex-column align-items-center mt-4">
                            <button type="submit" class="btn btn-lg submit-btn text-white">
                                <i class="bi bi-check-circle me-2"></i>提交投票
                            </button>
                            <div class="d-flex gap-4 mt-4">
                                <a href="{% url 'polls:index' %}" class="back-link">
                                    <i class="bi bi-arrow-left me-2"></i>返回所有投票
                                </a>
                                <a href="{% url 'polls:results' question.id %}" class="back-link">
                                    查看投票结果<i class="bi bi-arrow-right ms-2"></i>
                                </a>
                            </div>
                        </div>
                        
                        <!-- 投票信息统计 -->
                        <div class="poll-info">
                            <div class="info-item">
                                <div class="info-value">{{ question.choices.count }}</div>
                                <div class="info-label">选项数量</div>
                            </div>
                            <div class="info-item">
                                <div class="info-value">{{ question.total_votes }}</div>
                                <div class="info-label">总投票数</div>
                            </div>
                            <div class="info-item">
                                <div class="info-value">{{ question.pub_date|date:"Y-m-d" }}</div>
                                <div class="info-label">创建日期</div>
                            </div>
                        </div>
                        
                        <!-- 创建者信息 -->
                        <div class="creator-info">
                            <div class="creator-avatar">
                                <i class="bi bi-person"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold">投票创建者</h6>
                                <p class="mb-0 text-muted">系统管理员</p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            </div>
            <div class="vote-sidebar">
                <div class="side-card">
                    <div class="card-header side-header">
                        <h2 class="h4 mb-0"><i class="bi bi-info-circle me-2"></i>投票注意事项</h2>
                    </div>
                    <div class="card-body">
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-exclamation-triangle"></i>
                            </div>
                            <div class="notice-content">
                                <h5>投票规则</h5>
                                <p>每个注册用户只能投票一次，请谨慎选择</p>
                            </div>
                        </div>
                        
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-clock"></i>
                            </div>
                            <div class="notice-content">
                                <h5>截止时间</h5>
                                <p>本次投票将于2025年7月15日23:59截止</p>
                            </div>
                        </div>
                        
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-shield-lock"></i>
                            </div>
                            <div class="notice-content">
                                <h5>隐私保护</h5>
                                <p>您的投票选择将被匿名处理，个人信息严格保密</p>
                            </div>
                        </div>
                        
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </div>
                            <div class="notice-content">
                                <h5>修改限制</h5>
                                <p>提交投票后不可更改，请确认选择后再提交</p>
                            </div>
                        </div>
                        
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-eye"></i>
                            </div>
                            <div class="notice-content">
                                <h5>结果查看</h5>
                                <p>投票结束后可查看详细结果和统计图表</p>
                            </div>
                        </div>
                        
                        <div class="notice-item">
                            <div class="notice-icon">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="notice-content">
                                <h5>参与资格</h5>
                                <p>需完成实名认证才可以参与投票</p>
                            </div>
                        </div>
                        
                        <div class="mt-4 p-3 bg-light border rounded">
                            <h6 class="d-flex align-items-center mb-3">
                                <i class="bi bi-question-circle me-2 text-primary"></i>
                                需要帮助？
                            </h6>
                            <p class="mb-1 small">如有任何投票相关问题，请联系：</p>
                            <p class="mb-0 small"><i class="bi bi-envelope me-1"></i> support@123456789.com</p>
                            <p class="mb-0 small"><i class="bi bi-telephone me-1"></i> 123-456-7890</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5 class="fw-bold mb-3">投票系统</h5>
                    <p class="text-white-50">一个简单高效的在线投票平台，帮助您收集意见、做出决策。</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="bi bi-facebook fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-twitter fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-github fs-5"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-linkedin fs-5"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-4">
                    <h6 class="fw-bold mb-3">导航</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="{% url 'polls:index' %}" class="text-white-50 text-decoration-none">首页</a></li>
                        <li class="mb-2"><a href="/admin/polls/question/add/" class="text-white-50 text-decoration-none">创建投票</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">投票统计</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">帮助中心</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h6 class="fw-bold mb-3">资源</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">开发文档</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">API接口</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">使用教程</a></li>
                        <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">常见问题</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4">
                    <h6 class="fw-bold mb-3">联系我们</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2 d-flex">
                            <i class="bi bi-envelope me-2 text-primary"></i>
                            <span class="text-white-50">contact@123.com</span>
                        </li>
                        <li class="mb-2 d-flex">
                            <i class="bi bi-telephone me-2 text-primary"></i>
                            <span class="text-white-50">+86 123 4567 8901</span>
                        </li>
                        <li class="mb-2 d-flex">
                            <i class="bi bi-geo-alt me-2 text-primary"></i>
                            <span class="text-white-50">海南</span>
                        </li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-white-10">
            <div class="text-center text-white-50">
                <p class="mb-0">© 2025  投票系统. 保留所有权利。</p>
            </div>
        </div>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>